import Vue from 'vue';
import Vuex from 'vuex';
import _ from 'lodash';
Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
    // 样式
    MODELS: [
      // 第一个样式(L)
      {
        0: {
          row: 2,
          col: 1
        },
        1: {
          row: 2,
          col: 2
        },
        2: {
          row: 2,
          col: 3
        },
        3: {
          row: 1,
          col: 3
        },
      },
      // 第二个样式(凸)
      {
        0: {
          row: 1,
          col: 2
        },
        1: {
          row: 2,
          col: 1
        },
        2: {
          row: 2,
          col: 2
        },
        3: {
          row: 2,
          col: 3
        },
      },
      //  第三个样式(田)
      {
        0: {
          row: 1,
          col: 1
        },
        1: {
          row: 2,
          col: 1
        },
        2: {
          row: 1,
          col: 2
        },
        3: {
          row: 2,
          col: 2
        },
      },
      // 第四个样式(一)
      {
        0: {
          row: 1,
          col: 1
        },
        1: {
          row: 1,
          col: 2
        },
        2: {
          row: 1,
          col: 3
        },
        3: {
          row: 1,
          col: 4
        },
      },
      // 第五个样式(Z)
      {
        0: {
          row: 1,
          col: 1
        },
        1: {
          row: 1,
          col: 2
        },
        2: {
          row: 2,
          col: 2
        },
        3: {
          row: 2,
          col: 3
        },
      },
      // 测试样式
      // {
      //   0: {
      //     row: 0,
      //     col: 1
      //   },
      //   1: {
      //     row: 0,
      //     col: 2
      //   },
      //   2: {
      //     row: 0,
      //     col: 3
      //   },
      //   3: {
      //     row: 0,
      //     col: 4
      //   },
      //   4: {
      //     row: 0,
      //     col: 5
      //   },
      // }
    ],
    // 下一个模型
    nextModel: {},
    // 分数
    score: 0,
    data: ['0'],
    num: 3,
    music: true,
    flag: true,
    changeCss: false,
    name: '俄罗斯方块',
    pause: false,
    speed: 500,
    temSpeed: 100000,
    stop: false,
    // k=行_列 V=块元素
    fixedBlocks: {},
    // 分割容器
    ROW_COUNT: 20,  // y
    COL_COUNT: 10,  // x
    // 消除的行数
    rmRowSum: ['0'],
    // rmRowSumInt: 0
    gameplay: false

  },
  mutations: {
    nextModel(state) {
      state.nextModel = state.MODELS[_.random(0, state.MODELS.length - 1)];
    },
    addScore(state, number) {
      state.score += number;
    },
    // 计算分值并分割成数组
    splitsum(state) {
      state.data = state.score < 10 ? `${state.score}`.split('') : `${state.score}`.split('');
    },
    musicState(state) {
      state.music = false;
    },
    musicChange(state) {
      state.music = !state.music;
      localStorage.setItem('music', state.music);

    },
    ansynflag(state, val) {
      state.flag = val;
    },
    isChangeCss(state) {
      state.changeCss = !state.changeCss;
      if (state.changeCss) {
        document.body.style.backgroundColor = '#000';
        // this.$refs.name.innerHTML = 'Шарлауыҡтар';
        this.commit('changeName', 'Шарлауыҡтар');

      }
      else {
        document.body.style.backgroundColor = '#009688';
        // this.$refs.name.innerHTML = '俄罗斯方块';
        this.commit('changeName', '俄罗斯方块');
      }
    },
    changeName(state, val) {
      state.name = val;
    },
    downStop(state) {
      if (state.speed !== 100000) {
        state.temSpeed = state.speed;
        state.speed = 100000;
        state.stop = true;
      } else {
        state.speed = state.temSpeed;
        state.stop = false;
      }

    },
    fixedBlocksChange(state, val) {
      state.fixedBlocks == val;
    },
    // 当前消除行+1
    rmRowsumAdd(state) {
      // 数组(Arr)->对象(join)->int类型(parseInt)
      let t = parseInt((state.rmRowSum.join('')));
      t += 1;
      // 再把t转换成数组
      // 无法直接用t.split('')转化成数组,用这招
      t = t ? `${t}`.split('') : `${t}`.split('');
      state.rmRowSum = t;

    },
    gameplay(state){
      state.gameplay = true;

    }

    // restart(state) {
    //   // console.log(document.getElementById('back').children);
    //   for (var i = 0; i < state.COL_COUNT; i++) {
    //     for (var j = 0; j < state.ROW_COUNT; j++) {
    //       // console.log(document.getElementById('back'));
    //       // 1 删除该行中所有的块元素
    //       document.getElementById('back').removeChild('span');
    //       // 2 删除该行中所有块元素的数据源
    //       // state.fixedBlocks[i + '_' + j] = null;
    //     }
    //   }
    // }

  },
  actions: {
    // actionsasyncflag(context,val){
    //   setTimeout(() => {
    //     context.commit('addScore',val);
    //   }, 600);
    // }
  },
  getters: {
    // 计算分值并分割成数组
    // splitsum(state) {
    //   state.data = state.score < 10 ? `${state.score}`.split('') : `${state.score}`.split('');
    // }
  }
});
export default store;